<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import request from '../../utils/request';
const list = ref([]);

// 获取商品列表
// function getList() {
//   axios.get('http://localhost:8400/goods/findGoods')
//     .then(res => {
//       console.log("完整响应",res);
//         // 修改判断条件
//       if (res.data.status === 200 ) {
//         console.log("请求成功");
//         list.value = res.data.data;
//         console.log("商品数据:", list.value);
//       } else {
//         console.log("业务错误:", res.data.message);
//       }
//     })
//     .catch(err => {
//       console.log("网络错误",err.message);
//     });
// }
//  function getList(){ 
//   list.value = request.get('/goods/findGoods')
//   console.log("成功查到商品")
//   console.log(list.value)
// }
function getList(){ 
  request.get('/goods/findGoods')
    .then(data => {
      list.value = data
      console.log("成功查到商品", list.value)
    })
    .catch(error => {
      console.error("请求失败:", error)
      list.value = []
    })
}
onMounted(() => {
  console.log("开始请求,钩子函数");
  getList();
});
</script>


<template>
  <div class="goods-container">
    <h1>商品列表</h1>
    
    <!-- 商品表格 -->
    <el-table :data="list" style="width: 100%" v-if="list.length > 0">
      <el-table-column prop="gname" label="商品名称" width="200" />
      <el-table-column prop="author" label="作者" width="150" />
      <el-table-column prop="type" label="类型" width="150" />
      <el-table-column prop="price" label="价格" width="120">
        <template #default="{ row }">
          ¥{{ row.price }}
        </template>
      </el-table-column>
      <el-table-column prop="scorerequired" label="所需积分" width="120" />
      <el-table-column prop="duration" label="时长" width="120" />
      <el-table-column prop="describe1" label="描述" />
      <el-table-column label="操作" width="200" align="center">
        <template #default="{ row }">
          <el-button size="small" @click="handleBuy(row)">购买</el-button>
          <el-button size="small" @click="handlePreview(row)" v-if="row.video">预览</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 空状态 -->
    <div class="empty-state" v-else>
      <p>暂无商品数据</p>
    </div>
  </div>
</template>

<style scoped>
.goods-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.goods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.goods-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.goods-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.goods-image {
  height: 200px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.goods-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-image {
  color: #999;
  font-size: 14px;
}

.goods-info {
  padding: 15px;
}

.goods-name {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #333;
}

.goods-author,
.goods-type,
.goods-duration,
.goods-price,
.goods-score {
  margin: 5px 0;
  font-size: 14px;
  color: #666;
}

.goods-description {
  margin: 10px 0;
  font-size: 14px;
  color: #555;
  line-height: 1.4;
}

.goods-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.buy-button,
.preview-button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.buy-button {
  background-color: #409eff;
  color: white;
  flex: 1;
}

.buy-button:hover {
  background-color: #337ecc;
}

.preview-button {
  background-color: #67c23a;
  color: white;
}

.preview-button:hover {
  background-color: #55a02d;
}

.empty-state {
  text-align: center;
  padding: 50px 0;
  color: #999;
}

h1 {
  color: #333;
}
</style>